<!-- 
  Navigation 组件
  功能：实现一个响应式的导航菜单
  特点：
  - 支持PC端和移动端自适应
  - PC端支持mega菜单和简单下拉菜单
  - 移动端支持抽屉式菜单
  - 支持多级菜单结构
-->
<template>
  <nav class="nav-container">
    <div class="nav-content">
      <!-- PC端菜单布局 -->
      <div v-if="!isMobile" class="desktop-nav">
        <!-- 一级菜单项循环 -->
        <div class="nav-item" v-for="item in menuItems" :key="item.id" @mouseenter="handleMouseEnter(item)"
          @mouseleave="handleMouseLeave(item)">
          <a :href="`/classify/${item.url}-${item.id}.html`" target="_self" :title="item.name">
            <span :style="{ textDecoration: activeMenu === item.id ? 'underline' : 'none', color: textColor }">{{
              item.name }}</span></a>

          <!-- Mega Menu 或简单下拉菜单 -->
          <transition name="mega-menu-animation">
            <div v-if="item.children && activeMenu === item.id" class="mega-dropdown" :class="{ 'is-sticky': isSticky }"
              :style="{ top: isSticky ? '76px!important' : '112px!important' }">
              <div class="mega-content">
                <div class="menu-columns">
                  <!-- Mega Menu 类型 -->
                  <template v-if="item.type === 'mega'">
                    <!-- 遍历菜单列 -->
                    <div v-for="section in item.children" :key="section.id" :class="[
                      'menu-column',
                      { 'featured-column': section.type === 'featured' }
                    ]">
                      <!-- 链接类型的菜单列 -->
                      <template v-if="section.type === 'links'">
                        <h3>{{ section.name }}</h3>
                        <a v-for="link in section.children" :key="link.id" :href="link.url">
                          {{ link.name }}
                        </a>
                        <!-- 额外链接部分（如礼品卡等） -->
                        <template v-if="section.extraSection">
                          <h3 class="gift-card">{{ section.extraSection.title }}</h3>
                          <a v-for="link in section.extraSection.items" :key="link.id" :href="link.url">
                            {{ link.title }}
                          </a>
                        </template>
                      </template>

                      <!-- 特色图片类型的菜单列 -->
                      <template v-else-if="section.type === 'featured'">
                        <div class="featured-grid">
                          <div v-for="feature in section.items" :key="feature.id" class="featured-item">
                            <img :src="feature.image" :alt="feature.title">
                            <span>{{ feature.title }}</span>
                          </div>
                        </div>
                      </template>
                    </div>
                  </template>

                  <!-- 简单下拉菜单类型 -->
                  <template v-else>

                    <!-- 遍历菜单列 -->
                    <div v-for="section in item.children" :key="section.id" class="menu-column">
                      <!-- 链接类型的菜单列 -->
                      <div>
                        <a :href="`/classify/${section.url}-${section.id}.html`" target="_self" :title="section.name">
                          <h3>{{ section.name }}</h3>
                        </a>

                        <div v-for="link in section.children" :key="link.id">
                          <a :href="`/classify/${link.url}-${link.id}.html`" target="_self" :title="link.name">{{
                            link.name }}</a>
                        </div>

                        <!-- 额外链接部分（如礼品卡等） -->
                        <!-- <div v-if="section.extraSection">
                          <h3 class="gift-card">{{ section.extraSection.title }}</h3>
                          <a 
                            v-for="link in section.extraSection.items" 
                            :key="link.id" 
                            :href="link.url"
                          >
                            {{ link.title }}
                          </a>
                        </div> -->
                      </div>

                      <!-- 特色图片类型的菜单列 -->

                    </div>
                    <div class="featured-column">
                      <div class="featured-grid">
                        <div class="featured-item" v-for="section in item.children" :key="section.id">
                          <a :href="`/classify/${section.url}-${section.id}.html`" target="_self" :title="section.name">
                            <img :src="section.icon" :alt="section.name">
                            <span>{{ section.name }}</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>

      <!-- 移动端菜单按钮 -->
      <!-- <div v-else class="mobile-menu-trigger">
        <MenuOutlined @click="showDrawer" />
      </div> -->
    </div>

    <!-- 移动端抽屉菜单 -->
    <a-drawer placement="left" :visible="visible" @close="onClose" :width="300" class="mobile-drawer">
      <a-menu mode="inline">
        <!-- 移动端菜单项循环 -->
        <template v-for="item in menuItems" :key="item.id">
          <!-- 有子菜单的项目 -->
          <template v-if="item.children">
            <a-sub-menu :key="item.id">
              <template #title>{{ item.name }}</template>
              <template v-for="section in item.children" :key="section.id">
                <a-menu-item-group :title="section.name">
                  <a-menu-item v-for="link in section.children" :key="link.id">
                    <a :href="`/classify/${link.url}-${link.id}.html`" target="_self" :title="link.name">{{ link.name
                    }}</a>
                  </a-menu-item>
                </a-menu-item-group>
              </template>
            </a-sub-menu>
          </template>
          <!-- 无子菜单的项目 -->
          <template v-else>
            <a-menu-item :key="item.id">{{ item.name }}</a-menu-item>
          </template>
        </template>
      </a-menu>

    </a-drawer>
  </nav>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, computed, watch } from 'vue'
import type { PropType } from 'vue'
import { MenuOutlined } from '@ant-design/icons-vue'
import type { NavMenuItem, NavMenuLink, FeaturedItem } from './types'
import mitt from '@/utils/mitt'
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
  name: 'Navigation',
  components: {
    MenuOutlined
  },
  // 组件属性定义
  props: {
    // 菜单数据数组
    menuItems: {
      type: Array as PropType<NavMenuItem[]>,
      required: true
    },
    isSticky: {
      type: Boolean,
      default: false
    }
  },
  emits: ['hover-change'],
  setup(props, { emit }) {
    // 状态管理
    let visible = ref(false)         // 控制移动端抽屉显示状态
    let isMobile = ref(false)        // 是否为移动端
    let activeMenu = ref('')         // 当前激活的菜单项ID
    const router = useRouter();
    const route = useRoute();
    // const currentPath = ref(window.location.pathname)
    let textColor = ref('');

    watch(() => props.isSticky, (newPath) => {
      if (window.location.pathname === '/home/index.html' || window.location.pathname === '/') {
        if (props.isSticky) {
          textColor.value = '#000'
        } else {
          textColor.value = '#fff'
        }
      }

      if (window.location.pathname !== '/home/index.html' && window.location.pathname !== '/') {
        textColor.value = '#000'
      }
    }, { immediate: true })

    watch(() => route.path, (newPath) => {
      if (window.location.pathname === '/home/index.html' || window.location.pathname === '/') {
        if (props.isSticky) {
          textColor.value = '#000'
        } else {
          textColor.value = '#fff'
        }
      }

      if (window.location.pathname !== '/home/index.html' && window.location.pathname !== '/') {
        textColor.value = '#000'
      }
    }, { immediate: true })

    /**
     * 检查当前设备是否为移动端
     * 根据窗口宽度判断（<=390px 为移动端）
     */
    const checkMobile = () => {
      isMobile.value = window.innerWidth <= 768
    }

    /**
     * 显示移动端抽屉菜单
     */
    const showDrawer = () => {
      visible.value = true
    }

    /**
     * 关闭移动端抽屉菜单
     */
    const onClose = () => {
      visible.value = false
    }


    let isNavHover = ref(false);
    /**
     * 处理鼠标进入菜单项
     * @param item 当前菜单项数据
     */
    const handleMouseEnter = (item: NavMenuItem) => {
      activeMenu.value = item.id
      isNavHover.value = true
      // Emit hover event to parent
      emit('hover-change', true)
    }

    /**
     * 处理鼠标离开菜单项
     */
    const handleMouseLeave = (item: NavMenuItem) => {
      // activeMenu.value = item.id
      activeMenu.value = ''
      isNavHover.value = false
      // Emit hover event to parent
      emit('hover-change', false)
    }

    // 生命周期钩子：组件挂载时
    onMounted(() => {
      // 初始检查设备类型
      checkMobile()
      // 监听窗口大小变化
      window.addEventListener('resize', checkMobile)
      // 监听显示抽屉事件
      mitt.on('showDrawer', () => {
        showDrawer();
      })
    })

    // 生命周期钩子：组件卸载时
    onUnmounted(() => {
      // 移除事件监听
      window.removeEventListener('resize', checkMobile)
      mitt.off('showDrawer')
    })

    const goProduct = (item: any) => {
      // window.location.href = `/classify/${item.url}-${item.id}.html`;
      router.push({
        name: 'Products',
        query: {
          classify_id: item.pid + '-' + item.id
        }
      })
    }

    return {
      visible,
      isMobile,
      activeMenu,
      showDrawer,
      onClose,
      handleMouseEnter,
      handleMouseLeave,
      goProduct,
      isNavHover,
      textColor
    }
  }
})
</script>

<style lang="scss" scoped>
// Animation for mega menu
.mega-menu-animation-enter-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-animation-leave-active {
  transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
}

.mega-menu-animation-enter-from,
.mega-menu-animation-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.mega-menu-animation-enter-to,
.mega-menu-animation-leave-from {
  opacity: 1;
  transform: translateY(0);
}

// 导航容器样式
.nav-container {
  width: 100%;
  // background: #f5f5f5;
  // border-bottom: 1px solid #f0f0f0;
  position: relative;

  .nav-content {
    margin: 0 auto;
    position: relative;
  }
}

// PC端导航样式
.desktop-nav {
  display: flex;
  justify-content: center;
  gap: 183px;
  height: 44px;
  align-items: center;
  padding: 0 20px;

  // 响应式间距调整
  @media (max-width: 1440px) {
    gap: 120px;
  }

  @media (max-width: 1200px) {
    gap: 80px;
  }

  @media (max-width: 1024px) {
    gap: 60px;
  }

  @media (max-width: 900px) {
    gap: 40px;
  }

  // 导航项样式
  .nav-item {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 15px 0;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;

    &:hover {
      color: #000;
    }

    span {
      color: #000;
    }

    // Mega Menu 下拉样式
    .mega-dropdown {
      position: fixed;
      left: 0;
      right: 0;
      top: 120px;
      width: 100%;
      background: #fff;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      z-index: 3000;
      will-change: opacity, transform;
      transform-origin: top center;

      &.is-sticky {
        top: 40px;
      }

      .mega-content {
        max-width: 1280px;
        margin: 0 auto;
        padding: 40px 20px;
      }
    }
  }
}

// Mega Menu 内容样式
.mega-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  top: 120px;
  width: 100%;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  z-index: 3000;

  .mega-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  // 菜单列布局
  .menu-columns {
    display: flex;
    gap: 30px;

    // 普通菜单列样式
    .menu-column {
      min-width: 160px;

      h3 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #000;

        &.gift-card {
          margin-top: 30px;
        }
      }

      a {
        display: block;
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
        text-decoration: none;
        line-height: 24px;

        &:hover {
          color: #000;
        }
      }
    }

    // 特色图片列样式
    .featured-column {
      flex: 2;
      min-width: 400px;

      .featured-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        .featured-item {
          position: relative;
          aspect-ratio: 3/4;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          span {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.9);
            color: #000 !important;
            padding: 0px 10px;
            font-size: 12px;
            font-weight: 500;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}

// 移动端菜单触发按钮样式
.mobile-menu-trigger {
  padding: 16px;
  font-size: 20px;
  cursor: pointer;
}

// 移动端抽屉菜单样式
.mobile-drawer {
  :deep(.ant-drawer-body) {
    padding: 0;

    .ant-menu {
      border-right: none;

      .ant-menu-item,
      .ant-menu-submenu-title {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.5px;
      }

      .ant-menu-item-group-title {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.ant-drawer .ant-drawer-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  overflow: auto;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-menu-light.ant-menu-root.ant-menu-inline,
:where(.css-dev-only-do-not-override-1p3hq3p).ant-menu-light.ant-menu-root.ant-menu-vertical {
  border-inline-end: none;
}
</style>